<template>
	<view class="one">
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num"  :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="BH5"></view>
		<view class="padding-sm">
			<view class="position" v-if="data.type == 1">
				<view class="title"><span>*</span>门店名称</view>
				<view class="padding-top-xs"><input placeholder="请输入商家名称" name="store" v-model="data.store"></input></view>
			</view>
			<view class="position"  v-if="data.type == 1">
				<view class="title"><span>*</span>经营者电话(店铺所有者)</view>
				<view class="padding-top-xs"><input placeholder="请输入经营者电话"  @blur="handleBlur" name="owner" v-model="data.owner"></input></view>
			</view>
			<view class="position">
				<view class="title"><span>*</span>联系人</view>
				<view class="padding-top-xs"><input placeholder="请输入商家联系人" name="truename" v-model="data.truename"></input></view>
			</view>
			<view class="position">
				<view class="title"><span>*</span>联系电话</view>
				<view class="padding-top-xs"><input placeholder="请输入商家联系电话" name="mobile400" v-model="data.mobile400"></input></view>
			</view>
		</view>
		<view class="BH5"></view>
		<view class="bian ">
			<view class="title">身份证<text class="text-gray">（请上传经营者身份证照片）</text></view>
			<view class="shangc">
				<view class="sc-l"  @tap="uploadImages('codefront')">
					<view class="sc-l-img"><img :src="data.codefront?$wanlshop.oss(data.codefront):'/static/images/shop/shen.png'"></img></view><br/>
					身份证正面
				</view>
				<view class="sc-l"  @tap="uploadImages('codeback')">
					<view class="sc-l-img" ><img :src="data.codeback?$wanlshop.oss(data.codeback):'/static/images/shop/shen.png'"></img></view><br/>
					身份证反面
				</view>
			</view>
		</view>
		<view class="bian " v-if="data.type == 1">
			<view class="title">营业执照<text class="text-gray">（请上传最新中国大陆营业执照正面照）</text></view>
			<view class="yyzz" @tap="uploadImages('license')">
				<img :src="data.license?$wanlshop.oss(data.license):'/static/images/shop/shen.png'"></img>
			</view>
		</view>
		<view class="bian " v-if="data.type == 1">
			<view class="title">门店照片<text class="text-gray">（请上传门店照片）</text></view>
			<view class="yyzz" @tap="uploadImages('image')">
				<img :src="data.image?$wanlshop.oss(data.image):'/static/images/find/add.png'"></img>
			</view>
		</view>
		<view class="bian ">
			<view class="title">加入凭证<text class="text-gray">（请上传凭证）</text></view>
			<view class="yyzz" @tap="uploadImages('cert')">
				<img :src="data.cert?$wanlshop.oss(data.cert):'/static/images/find/add.png'"></img>
			</view>
		</view>
		<view class="H50"></view>
		<view class="btn flex flex-direction">
			<button v-if="loading"  style="background-color: #64AA58;height: 90rpx;line-height: 90rpx;color: white;" class="iconfont iconsaomiao">提交中...</button>
			<button v-else class="cu-btn lg bg-blue" @click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '提交资质'
				},  
				{
					name: '位置信息'
				},
				{
					name: '等待审核'
				},  ],
				num: 0,
				data:{
					store:'',
					image:'',
					truename:'',
					mobile400:'',
					codefront:'',
					codeback:'',
					license:'',
					cert:'',
					verify:0,
					type:1,
					owner:''
					
				},				
				loading:false
			};
		},
		onLoad(option) {
			if('type' in option){
				this.data.type = option.type;
			}
			this.getStore();			
		},
		methods:{
			async getStore(){
				await uni.request({
					url: '/wanlshop/ddp/getStore?type='+this.data.type,
					method: 'get',
					success: res => {
						console.log(res);
						if(res.data.data){
							if(res.data.data.verify >= 2){
								uni.navigateTo({
								  url: '/pages/shop/apply/three/three?type='+this.data.type,
								});
							}else{
								this.data = res.data.data;
							}														
						}
					}
			    });
				
			},
			next(){
				if (this.data.store == '' || this.data.truename == '' || this.data.mobile400 == '') {
					this.$wanlshop.msg('请填写必填项');
					return false;
				}
				//let store_ =  /^[\a-zA-Z0-9_-\u4e00-\u9fa5]{4,30}$/;
				let store_ = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/;
				let name_ =  /^[\u4E00-\u9FA5]{2,16}$/;
				let mobile_ =  /^[0-9-]{8,16}$/;
				
				if(this.data.type == 1){
					let owner_= /^1\d{10}$/;
					if(!owner_.test(this.data.owner)){
						this.$wanlshop.msg('请输入正确的联系方式');
						return false;
					}
				}
		
				if(!store_.test(this.data.store)){					
					this.$wanlshop.msg('请输入正确的店名');
					return false;
				}
				if(!name_.test(this.data.truename)){
					this.$wanlshop.msg('请输入正确的联系人');
					return false;
				}
				if(!mobile_.test(this.data.mobile400)){
					this.$wanlshop.msg('请输入正确的联系方式');
					return false;
				}
				this.loading = true;
				
				uni.request({					
					url: '/wanlshop/ddp/storeApply',
					data: this.data,
					method:'POST',
					success: res => {
						this.loading = false;
						uni.navigateTo({
						  url: '/pages/shop/apply/two/two?type='+this.data.type,
						});
						return true;						
					},
					error:res => {
						return false;
					}
				});
		
				
			},
		
			
			uploadImages(t){
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						let tempurl = res.tempFilePaths[0];
						console.log(tempurl);
						// 上传图片
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								uni.uploadFile({
									url: updata.data.uploadurl,
									filePath: tempurl,
									name: 'file',
									formData: updata.data.storage == 'local' ? null : updata.data.multipart,
									success: res => {
										this.data[t] = JSON.parse(res.data).data.fullurl;
									},
									fail: error =>{
										this.$wanlshop.msg(JSON.parse(error.data).msg);
									}
								});
							}
						});
					}
				});
				
			},
			//失去焦点
			handleBlur(e){				
				let mobile_= /^1\d{10}$/;
				if(!mobile_.test(e.detail.value)){
					this.$wanlshop.msg('请输入正确的联系方式');
					return false;
				}
				uni.request({
					url: '/wanlshop/user/getByMobile',
					data: {mobile:e.detail.value},
					method:'POST',
					success: res => {
						if(res.data.re == 0){
							uni.showModal({ 
							   content: '报歉，该手机号码未注册顿顿拍会员，请预先注册', 
							   showCancel: false, 
							   confirmText: "确认", 
							   success: (res) => { 
								   if (res.confirm) { 
									   store.dispatch('auth/logout') 
									   uni.reLaunch({ 
										   url: '/pages/login/index' 
									   }) 
								   } 
							   } 
						   })  
						}						
					},
					error:res => {
						console.log(res);
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.one{
	.BH5{background-color: #F3F5F4;height: 4px;}
	.title{padding: 5px 0 15px;font-weight: 600;
		span{color: #E74949;padding-right: 5px;}
	}
	.position{display: flex;justify-content: space-between;padding: 5px 0 0;
		input{text-align: right;}
	}
	.bian{border-bottom: 1px solid #F7F7F7;padding: 10px 10px 20px;}
	.shangc{display: flex;justify-content: space-between;
		.sc-l{width: 48%;text-align: center;color: #A1A1A1;
			.sc-l-img{background-color: #F7F7F7;padding: 10px 0;
				img{width: 140px;height: 85px;}
			}
		}
	}
	.yyzz{background-color: #F7F7F7;padding: 15px;text-align: center;
		img{width: 160px;height: 100px;}
	}
	.H50{height: 50px;}
	.btn{position: fixed;bottom: 0; left:0;padding: 10px;width: 100%;background-color: #fff;z-index: 9;}
}
</style>
